<template>
	<view class="warp">
	  <!-- <fu-custom bgColor="text-333" :isBack="true">
	  </fu-custom> -->
	  <!-- background pic start -->
	  <view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
	    <!-- <image :src="imgBaseUrl + 'user/login-bg.png'" mode="widthFix" class="bg-img"></image> -->
			<view class="cuIcon-back back-left" :style="[{top:StatusBar+'px'}]" @tap='toBack'></view>
	    <view class="logo-contnt flex align-center justify-center flex-direction">
	      <view class="logo width-180 height-180"></view>
	      <!-- <view>欢迎来到fust-UI</view> -->
	    </view>
	  </view>
	  <!-- background pic end -->
	
	  <!-- 密码login start -->
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" :src="imgBaseUrl + 'user/phone.png'" mode="widthFix"></image>
	    <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
	      :placeholder="i18n['请输入手机号']" name="input" />
	  </view>
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" :src="imgBaseUrl + 'user/yzm.png'" mode="widthFix"></image>
	    <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
	        type="number" v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4"/>
	      <view class="text-vecode" @click="getCode">
	        {{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
	      </view>
	    </view>
	  </view>
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" :src="imgBaseUrl + 'user/pwd.png'" mode="widthFix"></image>
	    <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'password'"
	        type="password" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'text'"
	        type="text" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
	      <image class="width-34" :src="imgBaseUrl + 'user/open.png'" :data-type="type" @click.stop="is_kejian"
	        v-if="type == 'text'" mode="widthFix"></image>
	      <image class="width-34" :src="imgBaseUrl + 'user/close.png'" :data-type="type" @click.stop="is_kejian"
	        v-if="type == 'password'" mode="widthFix"></image>
	    </view>
	  </view>
	  <!-- 密码login end -->
	  <!-- 立即登录按钮 start -->
	  <button type="success" class="text-white margin-lr-lg margin-top-180 bg-theme fu-fs32 round"
	    shape="circle" @click="handleLogin">
	    {{i18n['确定']}}
	  </button>
	  <!-- 断网监测 start -->
	  <fu-notwork></fu-notwork>
	  <!-- 断网监测 end -->
	
	</view>
</template>

<script>
	// 表单验证插件
	import {
		validate
	} from '@/common/utils/index.js'
	let _this;
	export default {
		data() {
			return {
				openid: '', //openid
				nickname: '', //昵称
				head_img_url: '', //头像图片
				sex: '', //性别
        unionId: '', // unionId
        authType: '',
        invite_code: '', //邀请码
				phone: '', //手机号
				vercode: '', //验证码
				password: '', //密码
				isLoading: false, // 立即登录按钮是否点击,@Boolean
				time: 60, //倒计时60S
				beginning: false, //显示倒计时
				is_click: false,
				type: 'password', //密码类型
			};
		},
		onLoad(option) {
			_this = this;
			this.openid = option.openId;
			this.nickname = option.nickName;
			this.head_img_url = option.avatarUrl;
			this.sex = option.sex;
			this.unionId = option.unionId;
			this.authType = option.authType || '';
		},
		onBackPress() {
			uni.hideKeyboard()
		},
		methods: {
			toBack(){
				uni.navigateBack()
			},
			//密码是否可见
			is_kejian(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 'password') {
					this.type = 'text';
				} else {
					this.type = 'password';
				}
			},
			/**
			 * @event 点击获取验证码
			 * @description 获取验证码
			 * @property {String} is_test - 是否是测试环境
			 * @property {String} phone - 手机号
			 * @property {String} type - 请求类型 1=注册(未注册手机号),2=忘记密码(已经注册的手机号),3=短信登录,4修改手几号
			 */
			// 发送验证码
			getCode() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        // 如果有倒计时，return false
        if (this.beginning) return;
				let {
					phone
				} = this;
				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
				// 上述验证都通过，将按钮的点击状态改为true
				this.isLoading = true;
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: phone,
						type: '5',
						auth_type: this.authType,
					})
					.then(res => {
						if (res.data.code == 1) {
							clearInterval(this.timer);
							this.beginning = true;
              // 清除倒计时,防抖作用
              clearInterval(this.timer);
							//开始倒计时
							this.timer = setInterval(() => {
								if (this.time == 1) {
									//倒计时结束就清楚这个倒计时
									clearInterval(this.timer);
									this.time = 60;
									this.beginning = false;
									return;
								}
								this.time--;
							}, 1000);
							// 向用户发送提示
							if (res.data.data.code) {
							  if(global.IS_DEV == 1){
							    this.$message.info(this.i18n['验证码为'] + res.data.data.code + this.i18n['请注意查收']);
							    this.vercode = res.data.data.code;
							  }else{
							    this.$message.info( '验证码发送成功，请注意查收' )
							  }
							}
              // 把按钮的状态改为false
              this.isLoading = false;
						} else {
							this.beginning = false; // 是否显示倒计时改为false
							// 把按钮的状态改为false
							this.isLoading = false;
							// 如果报错，向用户提示
							this.$message.info(res.data.msg);
						}
					}).catch(err => {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
			},

			/**
			 * @description  手机绑定
			 */
			handleLogin() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
				if (this.isLoading) return;
				let {
					phone,
					vercode,
					password,
					openid,
					nickname,
					head_img_url,
					sex,
					type,
					unionId,
					invite_code
				} = this;
				if (!phone) {
					this.$message.info(this.i18n['请输入手机号']);
					return false;
				}
				if (!validate(phone, 'phone')) {
					this.$message.info(this.i18n['请输入正确的手机号']);
					return false;
				}
				if (!vercode) {
					this.$message.info(this.i18n['验证码不能为空']);
					return false;
				}
				// 密码不符合正则验证
				if (!validate(password, 'password')) return this.$message.info(this.i18n['请输入字母加数字6-12位密码']);
				let clientId = '5555'
				// #ifdef APP-PLUS
				// clientId = plus.push.getClientInfo().clientid || '';
				// #endif
				// 上述验证都通过，将按钮的点击状态改为true
				this.isLoading = true;
        this.$api
          .post(global.apiUrls.postLoginByWechat, {
            unionId: unionId,
            mobile: phone,
            openId: openid,
            nickName: nickname,
            avatarUrl: head_img_url,
            gender: sex,
            type: 5,
            code: vercode,
            province: '',
            client_id: clientId,
            city: '',
            invite_code: invite_code,
          })
          .then(res => {
            if (res.data.code == 1 && res.data.data) {
              // 提示用户，后台返回的信息
              this.$message.info(res.data.msg);
              /**
               * @desc 向Vuex发送事件
               * @param {Object} res.data.data.userinfo - 后台返回来的用户信息
               */
              this.$store.commit('updateUserInfo', res.data.data.userinfo);
              setTimeout(() => {
                this.isLoading = false;
                uni.navigateBack();
              }, 800);
            } else {
              // 把按钮的状态改为false
              this.isLoading = false;
              // 错误的情况下向用户发送后台返回来的长度
              this.$message.info(res.data.msg);
            }
          }).catch(err => {
            // 把按钮的状态改为false
            this.isLoading = false;
          });
			}

		}
	};
</script>
<style lang="scss" scoped>
	.warp {
	  background: #fff;
	  min-height: 100vh;
	  overflow: hidden;
	
	  // background pic start
	  .bg {
	    width: 100%;
	    position: relative;
	    .bg-img {
	      height: 100%;
	      width: 100%;
	      position: absolute;
	      left: 0;
	      top: 0;
	      z-index: 2;
	    }
	    .logo-contnt {
	      position: absolute;
	      top: 0;
	      left: 0;
	      width: 100%;
	      height: 100%;
	      .logo {
	        background-image: url('https://localelife.chunchuangkeji.cn/h5img/logo.jpg');
	        background-repeat: no-repeat;
	        background-size: contain;
	        border-radius: 40rpx;
	        overflow: hidden;
	      }
	    }
	  }
	  // background pic end
	  // 验证码login end
	}
	.back-left{
		position: absolute;
		left: 30rpx;
		z-index: 100;
	}
</style>
